<template>
	<div class="app-container">
    	<div class="filter-container c-flex-row c-aligni-center c-justify-sb">
			<el-form class="form-container">
				<el-input @keyup.enter.native="handleFilter" v-model="listQuery.phonenum" clearable placeholder="搜索昵称、手机号" class="width200"></el-input>
        <el-input @keyup.enter.native="handleFilter" v-model="listQuery.sMobile" clearable placeholder="搜索来源昵称、来源手机号" class="width200"></el-input>
				<el-date-picker type="date" :editable="false" @change="timeCheck(1)" format="yyyy-MM-dd" placeholder="创建时间（开始）" v-model="listQuery.create_time" class="width200">
        </el-date-picker>
        <el-date-picker type="date" :editable="false"  @change="timeCheck(2)" format="yyyy-MM-dd" placeholder="创建时间（结束）"  v-model="listQuery.end_time" class="width200">
        </el-date-picker>

				<el-button type="primary" icon="el-icon-search" @click="handleFilter" class="search">搜索</el-button>
	        </el-form>
		</div>
		<div>
			<el-table :data="tableData" :header-row-style="{'font-family': 'PingFangSC-Semibold','backgroundColor': '#f5f7fa','color':'#5c6065'}" row-key="id" v-loading="listLoading" element-loading-text="加载中..." fit highlight-current-row style="width: 100%;color:#222;font-size: 12px;font-family: PingFangSC-Regular;">
			 		<el-table-column align="center" label="昵称">
						<template slot-scope="scope">
							<img :src="scope.row.headimgurl" style="width:40px;height:40px;border-radius:100%;vertical-align:middle;">
							<br><span>{{scope.row.nickname}}</span>
							<br>（ID：{{scope.row.userId}}）
						</template>
			    </el-table-column>
				 <el-table-column align="center" label="手机号" width="110">
						<template slot-scope="scope">
							<span>{{scope.row.mobile}}</span>
						</template>
					</el-table-column>
					<el-table-column  align="center" label="来源昵称">
						<template slot-scope="scope">
							<img v-if="scope.row.registrantId" :src="scope.row.sHeadimgurl" style="width:40px;height:40px;border-radius:100%;vertical-align:middle;">
							<br><span>{{scope.row.sNickname}}</span>
							<span v-if="scope.row.registrantId"><br>（ID：{{scope.row.registrantId}}）</span>
						</template>
			    </el-table-column>
					<el-table-column align="center" label="来源手机号">
						<template slot-scope="scope">
							<span>{{scope.row.sMobile}}</span>
						</template>
			    </el-table-column>
			    <el-table-column  align="center" label="积分值">
			        <template slot-scope="scope">
			          <span v-if="scope.row.isOut == 1">-{{scope.row.points}}</span>
								<span v-else>+{{scope.row.points}}</span>
			        </template>
			    </el-table-column>
			    <el-table-column  align="center" label="类型" width="120">
			        <template slot-scope="scope">
								<span v-if="scope.row.src==1">分享视频</span>
								<span v-if="scope.row.src==2">观看视频</span>
								<span v-if="scope.row.src==3">分享音频</span>
								<span v-if="scope.row.src==4">观看音频</span>
								<span v-if="scope.row.src==5">分享完成注册</span>
								<span v-if="scope.row.src==6">签到</span>
								<span v-if="scope.row.src==7">连续签到</span>
								<span v-if="scope.row.src==8">使用积分</span>
								<span v-if="scope.row.src==9">回退积分</span>
								<span v-if="scope.row.src==10">积分抵扣</span>
								<span v-if="scope.row.src==11">积分返还</span>
								<span v-if="scope.row.src==12">系统积分调整</span>
								<span v-if="scope.row.src==13">系统驳回</span>
								<span v-if="scope.row.src==14">分享图文</span>
			        </template>
			    </el-table-column>
					 <el-table-column  align="center" label="产品描述">
			        <template slot-scope="scope">
								<span v-if="scope.row.prodType == 5">【购买课程】</span>
								<span v-if="scope.row.prodType == 7">【活动付费】</span>
								<span v-if="scope.row.prodType == 8">【资料购买】</span>
								<span v-if="scope.row.prodType == 9">【购买栏目】</span>
								<span v-if="scope.row.prodType == 10">【社群购买】</span>
								<span v-if="scope.row.prodType == 11">【购买测评】</span>
								<span v-if="scope.row.prodType == 12">【商城购买】</span>
								<span>{{scope.row.proName}}</span>
			        </template>
			    </el-table-column>
			    <el-table-column align="center" label="创建时间">
			        <template slot-scope="scope">
			          <span>{{scope.row.createdAt}}</span>
			        </template>
			    </el-table-column>
		    </el-table>
		    <div class="block text-c">
				<!--分页组件 current-page:当前页   -->
				<!--   page-sizes:每页几条数据（选项）   -->
				<!--   page-size:每页几条数据   -->
				<!--   total:总条数   -->
			    <el-pagination
			      @size-change="handleSizeChange"
			      @current-change="handleCurrentChange"
			      :current-page="listQuery.currentPage"
			      :page-sizes="[10, 20, 30, 40]"
			      :page-size="10"
			      layout="total, sizes, prev, pager, next, jumper"
			      :total="listQuery.total">
			    </el-pagination>
			</div>
		</div>
	</div>
</template>
<script>
import { getPointList } from '@/api/member'
export default {
  data() {
    return {
      listQuery: {
        currentPage: 1, // 当前页
        total: null, // 数据总条数
        create_time: null,
        end_time: null,
        phonenum: null,
        sMobile: null, // 来源手机号、昵称
        page: 1
      },
      tableData: [],
      listLoading: false
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      getPointList(this.listQuery).then(res => {
        this.tableData = res.data.data.points.data
        this.listQuery.total = res.data.data.total
        this.listLoading = false
      }).catch(err => {
        console.log(err)
      })
    },
    handleSizeChange(val) { // 切换每页几条数据方法
      // console.log(`每页 ${val} 条`)
      this.listQuery.limit = val
      this.getList()
    },
    handleCurrentChange(val) { // 切换当前页
      // console.log(`当前页: ${val}`)
      this.listQuery.page = val
      this.getList()
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    timeCheck(type) {
      if (this.listQuery.create_time && this.listQuery.end_time && this.listQuery.create_time > this.listQuery.end_time) {
        this.$message({
          message: '结束时间不能小于开始时间',
          type: 'error'
        })

        if (type == 1) {
          this.listQuery.create_time = null
        } else {
          this.listQuery.end_time = null
        }
      }
    }
  }
}
</script>

<style scoped>
</style>
